<template>
  <div class="brand-wrapper" v-if="swiperList.length">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div class="swiper-container">
        <swiper ref="mySwiper" :options="swiperOptions">
          <swiper-slide v-for="(item, index) of swiperList" :key="index">
            <a :href="item.link">
              <img :src="item.image" alt />
            </a>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
      <div class="content" v-if="brandList.length">
        <div v-for="(item, index) of brandList" :key="index" class="panel-item">
          <panel-item-brand-row
            :brandInfo="item"
            @click.native="$router.push({path: '/brand/home-page', query: {id: item.id}})"
          />
        </div>
      </div>
    </van-list>
    <transition name="slide">
      <router-view></router-view>
    </transition>
  </div>
</template>
<script>
import PanelItemBrandRow from '@/components/panel-item-brand-row'
import { getBrandList, getSwiperList } from '@/api/home'
const ERR_OK = 200
export default {
  components: {
    PanelItemBrandRow
  },
  data () {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination'
        },
        loop: true,
        observer: true,
        observeParents: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        }
      },
      loading: false,
      finished: false,
      brandList: [],
      total: 0,
      page: 1,
      swiperList: []
    }
  },
  created () {
    this._getBrandList(this.page)
    this._getSwiperList()
  },
  beforeRouteEnter (to, from, next) {
    // ...
    window.scrollTo(0, 0)
    next()
  },
  methods: {
    onLoad () {
      this.page++
      this._getBrandList(this.page).then(() => {
        this.isFinished()
      })
    },
    isFinished () {
      if (this.brandList.length >= this.total) {
        this.finished = true
        this.loading = false
      } else {
        this.finished = false
        this.loading = true
      }
    },
    _getBrandList (page) {
      return getBrandList(page)
        .then(res => {
          if (res.code === ERR_OK) {
            this.brandList = this.brandList.concat(res.data.data)
            this.total = res.data.total

            return Promise.resolve()
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getSwiperList () {
      getSwiperList(3)
        .then(res => {
          if (res.code === ERR_OK) {
            this.swiperList = res.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/mixin.scss";
.swiper-container {
  width: 100%;
  // height: 5.2rem;
  img {
    width: 100%;
  }
}
.swiper-container /deep/ .swiper-pagination-bullet {
  width: 0.12rem;
  height: 0.12rem;
  background: #808080;
  border-radius: 50%;
  transition: all 0.3s;
}
.swiper-container /deep/ .swiper-pagination-bullet-active {
  width: 0.46rem;
  height: 0.12rem;
  background: rgba(255, 255, 255, 1);
  border-radius: 0.06rem;
}
.swiper-container /deep/ .swiper-pagination {
  position: absolute;
  left: 0.45rem;
  bottom: 0.45rem;
  width: auto;
}
.brand-wrapper {
  .content {
    width: 100%;
    padding: 0.62rem 0.32rem 0 0.32rem;
    box-sizing: border-box;
    .panel-item {
      margin-bottom: 0.3rem;
      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }
}
@include slideEnter();
</style>
